@import 'mixins_and_variables_and_functions';

.labels-select-contents-create {
  .dropdown-input {
    margin-bottom: 4px;
  }
}

.dropdown-menu-labels {
  .dropdown-content {
    max-height: 135px;
  }

  .dropdown-label-box {
    flex: 0 0 auto;
  }
}

.dropdown-new-label {
  .dropdown-content {
    max-height: initial;
  }
}

.color-label {
  padding: 0 $grid-size;
  line-height: 16px;
  border-radius: $label-border-radius;
  color: var(--white, $white);
}

.manage-labels-list {
  padding: 0;
  margin-bottom: 0;

  > li:not(.empty-message):not(.no-border) .label-content {
    display: flex;
    justify-content: space-between;

    .prioritized-labels:not(.is-not-draggable) & {
      cursor: grab;

      &:hover,
      &:focus-within {
        background-color: var(--blue-50, $blue-50);
      }

      &:active {
        cursor: grabbing;
      }
    }
  }
}

.prioritized-labels .add-priority,
.other-labels .remove-priority {
  display: none;
}

.label-subscription {
  width: 109px;
}

.label-actions-list {
  font-size: 0;
  list-style: none;
  flex-shrink: 0;
  text-align: right;
  padding: 0;
  position: relative;
  margin: 0;
}

.label-content {
  .label-name {
    width: 200px;

    // stylelint-disable-next-line gitlab/no-gl-class
    .gl-label {
      line-height: $gl-line-height;
    }
  }
}

@include gl-container-width-down(md, panel) {
  .manage-labels-list {
    > li:not(.empty-message):not(.no-border) .label-content {
      flex-wrap: wrap;
    }

    .label-name {
      order: 1;
      flex-grow: 1;
      width: auto;
      max-width: 100%;
    }

    .label-actions-list {
      order: 2;
      flex-shrink: 1;
      text-align: left;
    }

    .label-description {
      order: 3;
    }
  }
}

.priority-labels-empty-state .svg-content img {
  max-width: $priority-label-empty-state-width;
}
